<script setup>
  import { ref, computed } from 'vue'
  import { onLoad } from '@dcloudio/uni-app'
  import { goodsDetailApi, addCartApi } from '@/apis/detail'

  // 底部操作栏配置
  const options = ref([
    {
      icon: 'shop',
      text: '首页',
      infoBackgroundColor: '#007aff',
      infoColor: '#f5f5f5'
    },
    {
      icon: 'cart',
      text: '购物车',
      info: 0
    }
  ])

  const customButtonGroup = [
    {
      text: '加入购物车',
      backgroundColor: 'linear-gradient(90deg, #ffa800,#fc5531 )',
      color: '#fff'
    },
    {
      text: '立即购买',
      backgroundColor: 'linear-gradient(90deg, #fa251e, #088FEB)',
      color: '#fff'
    }
  ]
  const popup = ref()
  // 商品详情
  const goodsDetail = ref({})
  // 商品索引
  const currentIndex = ref(1)
  // 商品id
  const goodsId = ref('')
  // 商品数量
  const goodsNum = ref(1)
  // 定义动态按钮
  const goodsBtn = ref(null)

  onLoad((query) => {
    goodsId.value = query.id
    getGoodsDetail(query.id)
  })

  async function getGoodsDetail(goodsId) {
    const {
      data: { detail },
      message,
      status
    } = await goodsDetailApi(goodsId)
    if (status !== 200) uni.utils.toast(message)
    goodsDetail.value = detail
    // console.log(detail)
  }

  // 更换图片索引
  function handleSwiperItemChange(e) {
    currentIndex.value = e.detail.current + 1
  }

  // 右边按钮
  function buttonClick(e) {
    // console.log(e.index)
    if (e.index === 0) {
      popup.value.open('bottom')
      goodsBtn.value = 1
    } else {
      popup.value.open('bottom')
      goodsBtn.value = 2
    }
  }

  // 左边按钮
  function onClick(e) {
    // console.log(e)
    if (e.index === 0) {
      uni.switchTab({
        url: '/pages/index/index'
      })
    } else {
      uni.switchTab({
        url: '/pages/cart/cart'
      })
    }
  }

  // 底部购物车加减按钮
  function changeValue(num) {
    // console.log(num)
    goodsNum.value = num
  }

  // 关闭弹框
  function onPopupClose() {
    popup.value.close()
    goodsNum.value = 1
  }

  // 加入购物车
  async function addGoodsCart() {
    const { message, status } = await addCartApi(goodsId.value, goodsNum.value)
    if (status !== 200) return uni.utils.toast(message)
    uni.utils.toast(message)
    popup.value.close()
  }

  // 立即购买
  function onBuyGoods() {
    // uni.navigateTo({
    //   url: `/pages/checkout/index?num=${goodsNum.value}&goodsId=${goodsId.value}`
    // })
    popup.value.close()
  }
</script>

<template>
  <view class="goods-detail-container">
    <view class="goods-detail">
      <swiper
        class="swiper-box"
        indicator-dots
        autoplay
        circular
        @change="handleSwiperItemChange"
      >
        <swiper-item
          v-for="(item, index) in goodsDetail.goods_images"
          :key="index"
        >
          <view class="slide-image">
            <image class="image" mode="widthFix" :src="item.preview_url" />
          </view>
        </swiper-item>
      </swiper>
      <view class="swiper-count">
        <text>{{ currentIndex }}</text>
        <text>/</text>
        <text>{{ goodsDetail.goods_images?.length }}</text>
      </view>
    </view>

    <!-- 商品描述 -->
    <view class="info">
      <view class="price">
        <view>
          <text class="mky">¥</text>
          <text class="num">{{ goodsDetail.goods_price_max }}</text>
        </view>
        <text>已售{{ goodsDetail.goods_sales }}件</text>
      </view>
      <view class="tit">{{ goodsDetail.goods_name }}</view>
    </view>
    <!-- 差弹框和内容展示 -->
    <view class="goods-info">商品描述</view>
    <view>
      <mp-html :content="goodsDetail.content" />
    </view>

    <!-- 底部组件 -->
    <uni-goods-nav
      class="detail-btn"
      :fill="true"
      :options="options"
      :button-group="customButtonGroup"
      @click="onClick"
      @buttonClick="buttonClick"
    />

    <uni-popup ref="popup" background-color="#fff" type="bottom">
      <view class="top-popup">
        <view class="goods-image">
          <image
            style="width: 268rpx; height: 268rpx"
            :src="goodsDetail.goods_images[0].preview_url"
            mode=""
          ></image>
          <view class="goods-price">
            <view>
              <text class="money">¥</text>
              <text class="num">{{ goodsDetail.goods_price_max }}</text>
            </view>
            <view class="stock_total">
              库存： {{ goodsDetail.stock_total }}
            </view>
          </view>
        </view>
        <view class="goods-num">
          <text>数量</text>
          <uni-number-box @change="changeValue" />
        </view>
        <view class="goods-icon" @click="onPopupClose">
          <image class="icon-chacha" src="@/static/chacha.png" mode=""></image>
        </view>
      </view>
      <view class="goods-btn-box">
        <button
          v-if="goodsBtn === 1"
          :disabled="goodsDetail.stock_total === 0"
          class="goods-btn"
          @click="addGoodsCart"
        >
          加入购物车
        </button>
        <button
          :disabled="goodsDetail.stock_total === 0"
          v-else
          class="goods-buy"
          @click="onBuyGoods"
        >
          立即购买
        </button>
      </view>
    </uni-popup>
  </view>
</template>

<style lang="scss">
  .detail-btn {
    width: 100%;
    position: fixed;
    bottom: 0;
  }
  // 商品详情
  .goods-detail {
    position: relative;
    .swiper-box {
      height: 374px;
      .image {
        width: 100%;
      }
    }
    .swiper-count {
      position: absolute;
      top: 320px;
      right: 30px;
      background-color: gray;
      color: white;
      border-radius: 16px;
      padding: 0 8px;
    }
  }
  .goods-info {
    height: 120rpx;
    padding: 25rpx 30rpx;
    color: #303133;
    font-size: 50rpx;
  }
  .info {
    padding: 50rpx 30rpx;
    background-color: #fff;

    .tit {
      color: #303133;
      margin-top: 20rpx;
      font-size: 44rpx;
      display: -webkit-box;
      word-break: break-all;
      text-overflow: ellipsis;
      overflow: hidden;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 2;
      line-height: 1.3;
      white-space: normal;
    }

    .price {
      display: flex;
      justify-content: space-between;
      align-items: flex-end;
      text {
        font-size: 34rpx;
        color: #959595;
      }
      .mky {
        color: #fa2209;
      }
      .num {
        color: #fa2209;
        font-size: 62rpx;
      }
    }
  }
  .top-popup {
    position: relative;
    height: 570rpx;
    .goods-image {
      display: flex;
      justify-content: space-around;
      height: 300rpx;
      padding: 40rpx 30rpx 0;
      margin-bottom: 50rpx;
      .goods-price {
        display: flex;
        flex-direction: column;
        padding-right: 80rpx;
        padding-top: 85rpx;
        .money {
          color: #fe560a;
          font-size: 40rpx;
        }
        .num {
          color: #fe560a;
          font-size: 70rpx;
        }
        .stock_total {
          margin-top: 30rpx;
          font-size: 32rpx;
        }
      }
    }
    .goods-num {
      display: flex;
      justify-content: space-between;
      font-size: 38rpx;
      padding: 0rpx 50rpx;

      ::v-deep .uni-numbox__value {
        height: 63rpx;
        width: 104rpx;
      }
    }
  }
  .goods-btn-box {
    margin-bottom: 30rpx;
    padding: 0 50rpx;
  }
  .goods-btn {
    background-color: #ff9402;
    font-size: 40rpx;
    border-radius: 56rpx;
    color: #fff;
  }
  .goods-buy {
    background-color: #fe560a;
    font-size: 40rpx;
    border-radius: 56rpx;
    color: #fff;
  }
  .goods-icon {
    top: 7%;
    right: 7%;
    position: absolute;
    .icon-chacha {
      width: 40rpx;
      height: 40rpx;
    }
  }
</style>
